<template>
  <div>
    <div
      v-for="(o, index) in 8"
      :key="o"
      style="
        width: 105%;
        height: 250px;
        display: flex;
        float: left;
        margin-top: 10px;
        margin-left: 10px;
        background-color: burlywood;
      "
      @click="jump(index)"
    >
      <div style="height: 100%; width: 30%">
        <el-image style="width: 100%; height: 100%" :src="imgs[index]"> </el-image>
      </div>
      <div style="margin-top: 10px; height: 100%; width: 50%">
        <span
          style="
            display: flex;
            font-size: medium;
            font-weight: bold;
            color: black;
            margin-left: 10px;
            margin-top: 5px;
          "
          >电影名: {{ name[index] }}</span
        >
        <span
          style="
            display: flex;
            font-size: medium;
            font-weight: bold;
            color: black;
            margin-left: 10px;
            margin-top: 15px;
          "
          >导演: {{ director[index] }}</span
        >
        <span
          style="
            display: flex;
            font-size: medium;
            font-weight: bold;
            color: black;
            margin-left: 10px;
            margin-top: 15px;
          "
          >主演: {{ mrole[index] }}</span
        >
        <span
          style="
            display: flex;
            font-size: medium;
            font-weight: bold;
            color: black;
            margin-left: 10px;
            margin-top: 15px;
          "
          >语言:
          <el-tag type="primary" style="margin-left: 5px">{{ mlanguage[index] }}</el-tag></span
        >
        <span
          style="
            display: flex;
            font-size: medium;
            font-weight: bold;
            color: black;
            margin-left: 10px;
            margin-top: 15px;
          "
          >电影类型: {{ mtype[index] }}</span
        >
      </div>
      <div style="display: flex; float: right; width: 35%; height: 20%">
        <span
          style="
            display: inline-block;
            font-size: medium;
            font-weight: bold;
            color: orangered;
            margin-left: 26px;
            margin-top: 5px;
          "
          >推荐指数</span
        >
      </div>
      <div style="width: 19%; height: 40%; margin-left: -200px; margin-top: 50px">
        <span
          style="
            display: flex;
            font-size: 80px;
            font-weight: bold;
            color: black;
            margin-top: 5px;
            color: yellow;
          "
          >{{ score[index] }}</span
        >
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, defineProps, defineExpose } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
const props = defineProps(['search2'])
const score = ref([])
const name = ref([])
const imgs = ref([])
const director = ref([])
const mrole = ref([])
const mlanguage = ref([])
const mtype = ref([])

defineExpose({
  getData
})

onMounted(() => {
  getData()
})
const jump = (index) => {
  sessionStorage.setItem('movieInfo', JSON.stringify(name.value[index]))
}

function getData() {
  axios
    .get('/api/suggest/getSuggestTop8ByUid' + '/' + parseInt(props.search2))
    .then((res) => {
      imgs.value = []
      name.value = []
      director.value = []
      mrole.value = []
      mlanguage.value = []
      mtype.value = []
      score.value = []
      console.log(res.data)
      console.log('name：')
      console.log(name.value)
      for (const item of res.data) {
        imgs.value.push(require('@/assets/moviesPic/' + item.pic))
        name.value.push(item.mname)
        director.value.push(item.director)
        mrole.value.push(item.mrole)
        mlanguage.value.push(item.mlanguage)
        mtype.value.push(item.mtype)
        score.value.push(item.suggest)
      }
      console.log(name.value)
    })
    .catch(() => {
      ElMessage.warning('未查找到给该用户推荐的电影信息！')
    })
}
</script>
